<template>
  <div>
    <base-list ref="customerSearch"
               :condition="condition"
               :datas.sync="customerData"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="80px">
        <el-row>
          <el-col :span="7"
                  class="search-width4">
            <el-form-item label="客户名称">
              <auto-search-customer @selectName="v=>condition['search_LIKE_name']=v"></auto-search-customer>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="客户代码">
              <auto-search-resource searchType="JOB_RY"
                                    searchName="resourceName"
                                    @selectName="v=>condition['search_LIKE_resourceName']=v"></auto-search-resource>
            </el-form-item>
          </el-col> -->
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ml-80"
                       @click="loadData">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="customerData"
                border
                stripe
                max-height="500">
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="name"
                         label="客户名称"
                         min-width="200">
          <template slot-scope="scope">
            <div class="customerName"
                 @click="handleViewDialogForm(scope.row)">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="shortName"
                         label="客户简称"
                         min-width="120"></el-table-column>
        <el-table-column prop="orgName"
                         label="企业性质"
                         min-width="200"></el-table-column>
        <el-table-column prop="creditCode"
                         label="社会信用代码"
                         min-width="200"></el-table-column>
        <el-table-column prop="accountCount"
                         label="账户个数"
                         min-width="80"></el-table-column>
        <el-table-column prop="linkMan"
                         label="联系人"
                         min-width="120"></el-table-column>
        <el-table-column prop="linkTel"
                         label="联系电话"
                         min-width="120"></el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="240">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       @click="handleDialogFormOpen(true,scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       @click="handleRemove(scope.row)">删除
            </el-button>
            <el-button size="small"
                       type="text"
                       @click="handleAddAccountForm(scope.row)">
              新增账户
            </el-button>
            <el-button size="small"
                       type="text"
                       @click="handleAccountInfoForm">
              账户信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path:'/goods/business',name:'商务管理工作台'})">返回</el-button>
    </div>
    <add-account-form ref="addAccountForm"
                      @load="loadData"></add-account-form>
    <add-customer-form ref="addCustomerForm"
                       @load="loadData"></add-customer-form>
    <account-info-form ref="accountInfoForm"
                       @load="loadData"></account-info-form>
    <view-customer-form ref="viewCustomerForm"></view-customer-form>

  </div>
</template>

<script>
import { getCustomList, delCustomer } from '@/api/commerce/customer'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchResource from '@/components/autocomplete/autoSearchResource'
import autoSearchCustomer from '@/components/autocomplete/autoSearchCustomer'
import addAccountForm from './addAccountForm'
import addCustomerForm from './addCustomerForm'
import accountInfoForm from './accountInfoForm'
import viewCustomerForm from './viewCustomerForm'

export default {
  name: 'customerSearch',
  components: {
    addCustomerForm,
    autoSearchOrg,
    autoSearchResource,
    autoSearchCustomer,
    addAccountForm,
    accountInfoForm,
    viewCustomerForm
  },
  data() {
    return {
      condition: {}, // 查询条件
      customerData: [], // table数组
      pageSearch: getCustomList, // 分页查询api接口
      id: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    loadData() {
      this.$refs.customerSearch.loadData()
    },
    // 编辑
    handleDialogFormOpen(bool, item) {
      if (bool) {
        this.$refs.addCustomerForm.form = item
        this.$refs.addCustomerForm.isEdit = true
        this.$refs.addCustomerForm.dialogForm = true
      } else {
        this.$refs.addCustomerForm.dialogForm = true
      }
    },
    // 点击客户名称，查看客户详情
    handleViewDialogForm(val) {
      this.$refs.viewCustomerForm.form = val
      this.$refs.viewCustomerForm.dialogForm = true
    },
    // 新增账户
    handleAddAccountForm(item) {
      this.$refs.addAccountForm.form.customerId = item.id
      this.$refs.addAccountForm.disabled = true
      this.$refs.addAccountForm.dialogForm = true
    },
    // 账户信息
    handleAccountInfoForm() {
      this.$refs.accountInfoForm.dialogForm = true
    },
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delCustomer(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style scoped>
.customerName {
  color: blue;
  cursor: pointer;
}
</style>
